<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:a="http://richfaces.org/a4j"
                template="template.xhtml">

<!-- content -->
<ui:define name="content">

  <!-- put global messages at the top! -->
  <div class="section">
    <span class="errors">
      <h:messages globalOnly="true"/>
    </span>

    <h1>Search Projects</h1>

    <h:form id="searchCriteria">
      <fieldset> 
        <h:inputText id="searchString" value="#{projectSearch.searchCriteria}" style="width: 165px;">
          <!-- perform a search via AJAX and reRender allows the page to be partially updated as results come back -->
          <!-- this gives you instant search results as the user types. -->
          <a:support event="onkeyup" actionListener="#{projectSearch.findProjects}" reRender="searchResults" />
        </h:inputText>
        &#160;
	<!-- the reRender attribute needs to have the same name as the id for the outputPanel below -->
        <a:commandButton id="findProjects" value="Find Projects" action="#{projectSearch.findProjects}" reRender="searchResults"/>
       &#160;
       <!-- RichFaces tag that displays an image while waiting on an asynchronous request to return -->
       <a:status>
         <f:facet name="start">
           <h:graphicImage value="/img/spinner.gif"/>
         </f:facet>
       </a:status>

       <br/>

       <h:outputLabel for="pageSize">Maximum results:</h:outputLabel>&#160;
       <h:selectOneMenu value="#{projectSearch.pageSize}" id="pageSize">
          <f:selectItem itemLabel="5" itemValue="5"/>
          <f:selectItem itemLabel="10" itemValue="10"/>
          <f:selectItem itemLabel="20" itemValue="20"/>
       </h:selectOneMenu>
      </fieldset>
    </h:form>
  </div>

  <a:outputPanel id="searchResults">
    <div class="section">
      <!-- the DataList, projects is not a List, but rather a javax.faces.model.DataModel -->
      <h:outputText value="No Projects could be found." rendered="#{projects != null and projects.rowCount==0}" />
      <h:dataTable id="projects" value="#{projects}" var="project" rendered="#{projects.rowCount > 0}">
	<h:column>
	  <f:facet name="header">DB Version</f:facet>
	  #{project.version}
	</h:column>

	<h:column>
	  <f:facet name="header">Name</f:facet>
	  #{project.projectName}
	</h:column>

	<h:column>
	  <f:facet name="header">StartDate</f:facet>
	  <h:outputText value="#{project.projectStartDate}">
	    <s:convertDateTime type="both" dateStyle="medium" timeStyle="short"/>
	  </h:outputText>
	</h:column>

	<h:column>
	  <f:facet name="header">Created By</f:facet>
	  #{project.createdByUser.name}
	</h:column>

	<h:column>
	  <f:facet name="header">Action</f:facet>
	  <s:link id="viewProject"
		  value="View Project"
		  action="#{projectManager.selectProject(project)}" />
	</h:column>
      </h:dataTable>
      <s:span rendered="#{projectSearch.previousPageAvailable}">
	<s:link value="Previous results"
		action="#{projectSearch.previousPage}"/>&#160;
      </s:span>
      <s:link value="More results"
	      action="#{projectSearch.nextPage}"
	      rendered="#{projectSearch.nextPageAvailable}"/>
      <br />
      <h:outputText value="Showing records: #{projectSearch.firstRecord} to #{projectSearch.lastRecord} of #{projectSearch.totalProjects}" rendered="#{projectSearch.totalProjects > 0}"/>
    </div>
  </a:outputPanel>

</ui:define>
</ui:composition>
